<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>购物车</el-breadcrumb-item>
    </el-breadcrumb>
    <el-table
      :data="cartproducts"
      style="width: 100%"
    >
      <el-table-column
        width="55">
        <template  slot="header" slot-scope="scoped">
          <el-checkbox size="mini" :value="togglechecked" @change="toggleallchecked($event)"></el-checkbox>
        </template>
        <template slot-scope="scope">
          <el-checkbox size="mini" :value="scope.row.isChecked"
          @change="updateproductschecked({productID:scope.row.id,checked:$event})"
          ></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column
        prop="title"
        label="商品">
      </el-table-column>
      <el-table-column
        prop="price"
        label="单价">
      </el-table-column>
      <el-table-column
        prop="count"
        label="数量">
        <template slot-scope="scope">
          <el-input-number :value="scope.row.count" size="mini" :min="1"
          @change="updateproductscount({productID:scope.row.id,count:$event})"
          ></el-input-number>
        </template>
      </el-table-column>
      <el-table-column
        prop="price"
        label="小计">
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scoped">
          <el-button size="mini" @click="delcartproducts(scoped.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div>
      <p>已选 <span>{{checkedtotalCoun}}</span> 件商品，总价：<span>{{checkedtotalPrice}}</span></p>
      <el-button type="danger">结算</el-button>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapState, mapMutations } from 'vuex'
export default {
  name: 'CartIndex',
  computed: {
    ...mapState('cart', ['cartproducts']),
    ...mapGetters('cart', ['totalCount', 'totalPrice', 'checkedtotalCoun', 'checkedtotalPrice']),
    togglechecked () {
      return this.cartproducts.every(item => {
        console.log(item)
        return item.isChecked === true
      })
    }
  },
  methods: {
    ...mapMutations('cart',
      ['updateproductscount', 'delcartproducts', 'updateproductschecked', 'toggleallchecked'])
  },
  data () {
    return {

    }
  }
}
</script>

<style></style>
